<template>
  <div class="yhuguanli">
    <div class="ment-top">
       <span class="span-btn">
      <el-button
        class="ment-right"
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="dialogFormVisible=true"
      >添加用户</el-button>
       <el-input
          class="ment-input ment-right"
          placeholder="请输入内容"
          size="small"
          prefix-icon="el-icon-search"
          v-model="muenment"
       ></el-input>
        <el-button
          class="ment-right"
          size="small"
          icon="el-icon-search"
          type="primary"
          @click="findinput"
        >查找用户</el-button>
      <el-button
        class="ment-right"
        size="small"
        icon="el-icon-refresh-right"
        type="warning"
        @click="warning"
      >清空</el-button>
      </span>
      <span class="DerivedForm" >
         <el-button
           class="ment-right"
           size="small"
           icon="el-icon-upload2"
           type="success"
           @click="DownloadExel"
         >导出表格</el-button>
         <el-button
           class="ment-right"
           size="small"
           icon="el-icon-download"
           type="success"
           @click="ImportExel"
         >导入表格</el-button>
      </span>
    </div>
     <div>
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible" class="dialogform">
        <el-form :model="formbtn" >
          <el-form-item >
            <label-wrap  class="dialog-item">登录名</label-wrap>
            <el-input v-model="formbtn.username" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">密码</label-wrap>
            <el-input v-model="formbtn.password" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">确认密码</label-wrap>
            <el-input v-model="formbtn.passconfirm" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">姓名</label-wrap>
            <el-input v-model="formbtn.name" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item >
            <label-wrap  class="dialog-item">邮箱</label-wrap>
            <el-input v-model="formbtn.email" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">电话号码</label-wrap>
            <el-input v-model="formbtn.phone" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap>所属角色</label-wrap>
            <el-select v-model="formbtn.value" placeholder="请选择角色" class="dialog-input">
              <el-option label="系统管理员" value="系统管理员"></el-option>
              <el-option label="老师" value="老师"></el-option>
              <el-option label="普通管理员" value="普通管理员"></el-option>
              <el-option label="销售" value="销售"></el-option>
              <el-option label="文字和视频" value="文字和视频"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="CancelAdd">取 消</el-button>
          <el-button type="primary" @click="addFormrmine">确 定</el-button>
        </div>
      </el-dialog>
       <el-dialog title="修改用户信息" :visible.sync="editorVisible" class="dialogform">
         <el-form :model="editor">
           <el-form-item >
             <label-wrap  class="dialog-item">登录名</label-wrap>
             <label-wrap  autocomplete="off" class="dialog-input">{{this.editor.username}}</label-wrap>
           </el-form-item>
           <el-form-item>
             <label-wrap  class="dialog-item">姓名</label-wrap>
             <el-input v-model.lazy="editor.name" autocomplete="off" class="dialog-input"></el-input>
           </el-form-item>
           <el-form-item >
             <label-wrap  class="dialog-item">E-MAL</label-wrap>
             <el-input v-model.lazy="editor.email" autocomplete="off" class="dialog-input"></el-input>
           </el-form-item>
           <el-form-item>
             <label-wrap  class="dialog-item">电话号码</label-wrap>
             <el-input v-model="editor.phone" autocomplete="off" class="dialog-input"></el-input>
           </el-form-item>
           <el-form-item>
             <label-wrap>所属角色</label-wrap>
             <el-select v-model="editor.role" placeholder="请选择角色" class="dialog-input">
               <el-option label="系统管理员" value="系统管理员"></el-option>
               <el-option label="老师" value="老师"></el-option>
               <el-option label="普通管理员" value="普通管理员"></el-option>
               <el-option label="销售" value="销售"></el-option>
               <el-option label="文字和视频" value="文字和视频"></el-option>
             </el-select>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="editorVisible = false">取 消</el-button>
           <el-button type="primary" @click="editorEditrmine">确 定</el-button>
         </div>
       </el-dialog>
       <el-dialog title="修改密码" :visible.sync="dialogFormpassword" class="dialogform">
         <el-form :model="Modifypass" >
           <el-form-item >
             <label-wrap  class="dialog-item">登录名</label-wrap>
             <label-wrap   autocomplete="off" class="dialog-input">{{this.Modifypass.username}}</label-wrap >
           </el-form-item>
           <el-form-item>
             <label-wrap  class="dialog-item">密码</label-wrap>
             <el-input type="password" v-model="Modifypass.password" autocomplete="off" placeholder="请输入新的密码" class="dialog-input"></el-input>
           </el-form-item>
           <el-form-item>
             <label-wrap  class="dialog-item">确认密码</label-wrap>
             <el-input type="password" v-model="Modifypass.passconfirm" autocomplete="off" placeholder="确认密码" class="dialog-input"></el-input>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormpassword = false">取 消</el-button>
           <el-button type="primary" @click="FormPassWord">确 定</el-button>
         </div>
       </el-dialog>
       <el-dialog title="打印日志" :visible.sync="dialogTableVisible" align="center">
         <el-table :data="gridData" align="center" size="small">
           <el-table-column align="center" property="date" label="登录时间" width="150"></el-table-column>
           <el-table-column align="center" property="name" label="登录ip" width="200"></el-table-column>
           <el-table-column align="center" property="name" label="操作系统" width="200"></el-table-column>
           <el-table-column align="center" property="address" label="浏览器"  width="200"></el-table-column>
         </el-table>
       </el-dialog>
    </div>
    <div>
      <el-table
        :data="finalist"
        size="small"
        border
        style="width: 100%;
        margin-top: 10px">
        <el-table-column
          prop="username"
          label="登录名"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="email"
          label="E-MAIL"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="phone"
          label="电话号码"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="create_time"
          label="创建时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="after_time"
          label="最后登录时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="after_IP"
          label="最后登录IP"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status" type="success">已启用</el-tag>
            <el-tag v-else type="danger">未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        width="210"
        v-if="!!this.roles.includes('admin')"
        align="center">
        <template slot-scope="scope">
            <el-button
              size="mini"
              @click="editorEdit(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handlefreeze(scope.$index, scope.row)"
            >冻结</el-button>
            <el-dropdown size="small">
              <el-button type="primary"
              size="mini"
              style="margin-left: 10px">
              更多</el-button>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item  @click.native="MoreClickModify(scope.$index, scope.row)">修改密码</el-dropdown-item>
                <el-dropdown-item  @click.native="MoreClickdelete(scope.$index, scope.row)">删除用户</el-dropdown-item>
                <el-dropdown-item  @click.native="MoreClickLog(scope.$index, scope.row)">查看日志</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div><!--  //分页  -->
        <el-pagination
          @size-change=""
          @current-change=""
          :current-page="currentPage2"
          :page-sizes="[20,40,60,80,100]"

          layout="total, sizes, prev, pager, next, jumper"
          :total="100">
        </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import 'driver.js/dist/driver.min.css' // import driver.js css
import Pagination from '@/components/Pagination'
import { mapGetters,mapState} from 'vuex'
import request from "@/utils/request";
import {fetchList} from "@/api/article";

export default {
  name: 'User',
  components: {Pagination},
  data() {
    return {
      total: 0, // 数据的总数
      listQuery: {
        page: 1, // 当前在第几页
        Limit: 15// 每页多少条
      },
      root:true,
      noroot:false,
      //新增表数据
      formbtn: {
        username: "",
        passconfirm:"",
        name: "",
        email: "",
        phone: '',
        role:'',
      },
      //修改数据
      editor: {
        username: "",
        name: "",
        email: "",
        phone: '',
        role:''
      },
      //修改密码
      Modifypass:{
        username:"",
        password:"",
        passconfirm:"",
        id:""
      },
      //日志
      gridData:{
      },
      currentPage2: 5,
      //搜索框数据
      muenment:'',
      //关闭新增用户表框
      dialogFormVisible: false,
      //关闭编辑用户表框
      editorVisible: false,
      //关闭修改密码框
      dialogFormpassword:false,
      //日志框
      dialogTableVisible:false,
    }
  },
  created() {
    this.getfend()
  },
  computed: {
    ...mapGetters(['roles',]),
    ...mapState(['finalist'])
  },
  methods: {
   /* ...mapActions(['getfend']),*/
    getfend(){
      this.$store.dispatch('getfend')
    },
    //搜索内容
    async findinput(muenment) {
      if (this.muenment === '') {
        this.$message.error('查询内容不能为空!!')
      } else {
        muenment = this.muenment
          let dd= await fetchList()
        console.log(dd)
       /* request.get('/search', muenment).then((resp) => {
          if (resp) {
            resp.data
          }
        })*/
      }
    },
    //清空内容
    warning() {
      this.muenment = ''
      this.editor = ''
      this.formbtn = ''
    },
    //添加用户
    addFormrmine() {//点击确定按钮
      if (this.formbtn) {
        request.post('/louser', this.formbtn).then((resp) => {
          if (resp) {
            // console.log(this.formbtn)
            this.getfend()
            this.dialogFormVisible = false
            //  console.log(resp)
            this.formbtn = ''
          } else {
          }
        })
      }
    },
    //修改用户信息
    editorEdit(index, data) {//点击编辑按钮
      this.editor = data
      this.editorVisible = true
    },
    CancelAdd() {//取消修改
      this.getfend()
      this.editorVisible = true
    },
    //点击确定按钮
    editorEditrmine() {
      request.put('/update', this.editor).then((resp) => {
        if (resp) {
          //   this.editor = resp.data
          this.editorVisible = false
          this.getfend()
        } else {
          this.$message.error('error')
        }
      })
    },
    //冻结用户
    handlefreeze(index, data) {
      this.$confirm('此操作将冻结该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        /* Object.freeze(this.finalist.data.id)*/
      }).catch(() => {
        this.$message({
          message: '已取消冻结'
        })
      })
    },
    //更多选项事件// /修改密码
    MoreClickModify(index, data) {
      this.Modifypass.username = data.username
      this.Modifypass.id = data.id
      this.dialogFormpassword = true
      //console.log(data)
    },
    //确认修改
    FormPassWord() {
      if (!(this.Modifypass.password === '' || this.Modifypass.passconfirm === '')) {//判断密码是否为空
        if (this.Modifypass.password === this.Modifypass.passconfirm) {//判断确认密码是否正确
          this.$confirm('操作将修改用户密码, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            request.post(`/post?id=${this.Modifypass.id}`).then((resp) => {
              if (resp) {
                this.$message({
                  message: '修改成功',
                })
                this.dialogFormpassword = false
              }
            }).catch(() => {
              this.$message({
                message: '操作有误，取消修改！'
              })
            })
          })
        } else {
          this.$message.error('密码输入不一致')
        }
      } else {
        this.$message.error('密码不能为空')
      }
    },
    //删除用户
    MoreClickdelete(index, data) {
      console.log(data.id)
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete('/delete', data.id).then((resp) => {
          if (resp) {
            this.$message({
              message: '删除成功!'
            })
            this.getfend()
          }
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除'
        })
      })
    },
    //查看日志
    MoreClickLog(index, data) {
      request.get('list', data.id).then((resp) => {
        if (resp) {
          this.gridData = resp.data
        }
      })
      this.dialogTableVisible = true
    },
    //导出表格
    DownloadExel() {
      alert('导出表格成功！')
    },
    //导入表格
    ImportExel(){
      alert('导入表格成功！')
    }
  }
}
</script>
<style>
.yhuguanli{
  margin:0 10px;
  padding: 10px;
}
.DerivedForm{
  float: right;
}
.ment-input{
  width: 300px;
}
.ment-top{
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.ment-right{
  margin: 6px 6px;
}
.span-btn{
  display: block;
  width:680px;
}
.dialogform{
  width: 65%;
  margin: auto;
}
.dialog-input{
  width: 80%;
  margin: auto;
  float: right;
}
.dialog-item{
  width: 60px;
}
</style>
